<template>
  <div class="casino-app">
    <!-- 背景图装饰层 -->
    <div class="background-decoration"></div>
    
    <!-- 顶部导航 -->
    <header class="main-header">
      <div class="logo">
        <i class="fas fa-dice"></i>
        <h1>大小王赌场</h1>
      </div>
      
      <!-- 左侧信息 -->
      <div class="user-stats left-stats">
        <div class="stat-item">
          <i class="fas fa-coins"></i>
          <span>余额: <strong>{{ userBalance }}</strong> 筹码</span>
        </div>
        <div class="stat-item">
          <i class="fas fa-users"></i>
          <span>在线: <strong>{{ onlineUsers }}</strong> 人</span>
        </div>
      </div>
      
      <!-- 中间核心信息 - 轮数和时间 -->
      <div class="game-status">
        <div class="stat-item round-info">
          <i class="fas fa-redo"></i>
          <span>第 <strong>{{ currentRound }}/{{ totalRounds }}</strong> 轮</span>
        </div>
        <div class="stat-item timer" :class="{ warning: betTime < 10 }">
          <i class="fas fa-clock"></i>
          <span>押注时间: <strong>{{ betTime }}s</strong></span>
        </div>
      </div>
      
      <!-- 右侧占位，保持平衡 -->
      <div class="user-stats right-stats">
        <div class="stat-item placeholder"></div>
        <div class="stat-item placeholder"></div>
      </div>
    </header>
    
    <!-- 主要内容区 - 三栏布局 -->
    <div class="main-content">
      <!-- 左侧：押小玩家区域 -->
      <section class="players-column small-column">
        <div class="section-header">
          <h2>押小玩家</h2>
          <p>共 {{ smallCount }} 人</p>
        </div>
        
        <div class="avatar-grid">
          <!-- 当前玩家（如果押小） -->
          <div class="avatar-item current-player" :title="currentPlayerTitle" v-if="selectedBet === 'small' && betConfirmed">
            <img src="../assets/img/头像.png" alt="当前玩家头像">
            <div class="bet-indicator small">小</div>
          </div>
          
          <!-- 其他押小玩家 -->
          <div class="avatar-item" 
               v-for="(player, index) in smallPlayers" 
               :key="'small-' + index" 
               :title="`玩家${index + 1} (押小) ${player.amount}筹码`">
            <img src="../assets/img/头像.png" :alt="`玩家${index + 1}的头像`">
            <div class="bet-indicator small">小</div>
          </div>
          
          <!-- 显示更多提示 -->
          <div class="more-players" v-if="smallPlayers.length > maxVisibleAvatarsPerSide">
            +{{ smallPlayers.length - maxVisibleAvatarsPerSide }}
          </div>
        </div>
        
        <!-- 押小统计 -->
        <div class="stat-card small-stat">
          <div class="stat-value">
            <span class="percentage">{{ smallPercentage }}%</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: smallPercentage + '%' }"></div>
          </div>
          <div class="total-chips">
            总筹码: {{ smallTotalChips }}
          </div>
        </div>
      </section>
      
      <!-- 中间：主游戏区 -->
      <main class="game-main">
        <!-- 押注区域 -->
        <section class="bet-section">
          <h2>选择你的押注</h2>
          
          <div class="bet-buttons">
            <button 
              class="bet-btn bet-small" 
              :class="{ selected: selectedBet === 'small' }"
              @click="selectBet('small')"
              :disabled="!isBetting || !canBet"
            >
              <i class="fas fa-arrow-down"></i>
              <span>小</span>
              <small>1-3点</small>
            </button>
            
            <button 
              class="bet-btn bet-big" 
              :class="{ selected: selectedBet === 'big' }"
              @click="selectBet('big')"
              :disabled="!isBetting || !canBet"
            >
              <i class="fas fa-arrow-up"></i>
              <span>大</span>
              <small>4-6点</small>
            </button>
          </div>
          
          <div class="bet-input-area">
            <label for="betAmount">押注金额:</label>
            <input 
              type="number" 
              id="betAmount"
              v-model="betAmount" 
              min="1" 
              :max="userBalance"
              :disabled="!isBetting || !canBet"
            >
            <button 
              class="confirm-bet-btn" 
              @click="confirmBet"
              :disabled="!selectedBet || !betAmount || betAmount > userBalance || !isBetting || !canBet || betConfirmed"
            >
              <i class="fas fa-check"></i> 确认押注
            </button>
          </div>
        </section>
        
        <!-- 结果区域 -->
        <section class="result-section" v-if="isRolling || roundResult || gameOver">
          <h2 v-if="!gameOver">本轮结果</h2>
          <h2 v-if="gameOver">游戏结束</h2>
          
          <div class="dice-animation" v-if="isRolling">
            <i class="fas fa-dice-five fa-spin"></i>
            <p>摇骰子中...</p>
          </div>
          
          <div class="dice-result" v-if="roundResult && !gameOver">
            <div class="result-value">{{ diceResult }}</div>
            <p class="result-message" :class="roundResult">
              {{ roundResult === 'win' ? '恭喜获胜！' : '很遗憾，输了' }}
            </p>
            <p class="round-summary">
              {{ roundResult === 'win' ? '赢得' : '输掉' }} {{ betAmount }} 筹码
            </p>
            <p v-if="nextRoundIn > 0" class="next-round">
              下一轮开始于: {{ nextRoundIn }}s
            </p>
          </div>
          
          <div class="game-over" v-if="gameOver">
            <div class="final-result">
              <p>最终结果</p>
              <p>总盈亏: <span :class="totalProfit >= 0 ? 'win' : 'lose'">
                {{ totalProfit >= 0 ? '+' : '' }}{{ totalProfit }} 筹码
              </span></p>
              <p>胜场: {{ winCount }} 场 / 负场: {{ loseCount }} 场</p>
            </div>
            <button class="play-again-btn" @click="resetGame">
              <i class="fas fa-redo-alt"></i> 再玩一次
            </button>
          </div>
        </section>
      </main>
      
      <!-- 右侧：押大玩家区域 -->
      <section class="players-column big-column">
        <div class="section-header">
          <h2>押大玩家</h2>
          <p>共 {{ bigCount }} 人</p>
        </div>
        
        <div class="avatar-grid">
          <!-- 当前玩家（如果押大） -->
          <div class="avatar-item current-player" :title="currentPlayerTitle" v-if="selectedBet === 'big' && betConfirmed">
            <img src="../assets/img/头像.png" alt="当前玩家头像">
            <div class="bet-indicator big">大</div>
          </div>
          
          <!-- 其他押大玩家 -->
          <div class="avatar-item" 
               v-for="(player, index) in bigPlayers" 
               :key="'big-' + index" 
               :title="`玩家${index + 1} (押大) ${player.amount}筹码`">
            <img src="../assets/img/头像.png" :alt="`玩家${index + 1}的头像`">
            <div class="bet-indicator big">大</div>
          </div>
          
          <!-- 显示更多提示 -->
          <div class="more-players" v-if="bigPlayers.length > maxVisibleAvatarsPerSide">
            +{{ bigPlayers.length - maxVisibleAvatarsPerSide }}
          </div>
        </div>
        
        <!-- 押大统计 -->
        <div class="stat-card big-stat">
          <div class="stat-value">
            <span class="percentage">{{ bigPercentage }}%</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" :style="{ width: bigPercentage + '%' }"></div>
          </div>
          <div class="total-chips">
            总筹码: {{ bigTotalChips }}
          </div>
        </div>
      </section>
    </div>
    
    <!-- 页脚 -->
    <footer class="main-footer">
      <p>🎮 娱乐游戏 · 理性对待 🎮</p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 游戏配置
      totalRounds: 3,
      betTimeLimit: 20,
      nextRoundDelay: 5,
      maxVisibleAvatarsPerSide: 36,
      
      // 用户信息
      userBalance: 1000,
      initialBalance: 1000,
      selectedBet: '',
      betAmount: 10,
      betConfirmed: false,
      
      // 游戏状态
      currentRound: 1,
      betTime: 0,
      nextRoundIn: 0,
      isBetting: false,
      isRolling: false,
      roundResult: '',
      diceResult: 0,
      gameOver: false,
      
      // 统计信息
      winCount: 0,
      loseCount: 0,
      
      // 在线信息
      onlineUsers: 0,
      otherPlayers: []
    };
  },
  
  computed: {
    totalProfit() {
      return this.userBalance - this.initialBalance;
    },
    
    canBet() {
      return this.userBalance >= 1;
    },
    
    // 押小玩家数量
    smallCount() {
      const count = this.otherPlayers.filter(p => p.bet === 'small').length;
      return this.selectedBet === 'small' && this.betConfirmed ? count + 1 : count;
    },
    
    // 押大玩家数量
    bigCount() {
      const count = this.otherPlayers.filter(p => p.bet === 'big').length;
      return this.selectedBet === 'big' && this.betConfirmed ? count + 1 : count;
    },
    
    totalPlayers() {
      return this.otherPlayers.length + 1;
    },
    
    smallPercentage() {
      return this.totalPlayers > 0 ? Math.round((this.smallCount / this.totalPlayers) * 100) : 0;
    },
    
    bigPercentage() {
      return 100 - this.smallPercentage;
    },
    
    smallTotalChips() {
      const total = this.otherPlayers
        .filter(p => p.bet === 'small')
        .reduce((sum, p) => sum + p.amount, 0);
      return this.selectedBet === 'small' && this.betConfirmed ? total + this.betAmount : total;
    },
    
    bigTotalChips() {
      const total = this.otherPlayers
        .filter(p => p.bet === 'big')
        .reduce((sum, p) => sum + p.amount, 0);
      return this.selectedBet === 'big' && this.betConfirmed ? total + this.betAmount : total;
    },
    
    // 押小玩家列表
    smallPlayers() {
      const small = this.otherPlayers.filter(p => p.bet === 'small');
      return [...small].sort(() => 0.5 - Math.random()).slice(0, this.maxVisibleAvatarsPerSide);
    },
    
    // 押大玩家列表
    bigPlayers() {
      const big = this.otherPlayers.filter(p => p.bet === 'big');
      return [...big].sort(() => 0.5 - Math.random()).slice(0, this.maxVisibleAvatarsPerSide);
    },
    
    // 当前玩家标题
    currentPlayerTitle() {
      let betInfo;
      if (this.selectedBet) {
        const betType = this.selectedBet === 'small' ? '押小' : '押大';
        betInfo = `${betType} ${this.betAmount}筹码`;
      } else {
        betInfo = '未押注';
      }
      return `你 (${betInfo})`;
    }
  },
  
  mounted() {
    this.updateOnlineUsers();
    this.generateOtherPlayers();
    
    // 减少定时器频率，降低性能消耗
    setInterval(() => {
      this.updateOnlineUsers();
    }, 8000);
    
    setInterval(() => {
      this.updateOtherPlayers();
    }, 12000);
    
    this.startFirstRound();
  },
  
  methods: {
    startFirstRound() {
      this.currentRound = 1;
      this.startRound();
    },
    
    startRound() {
      this.selectedBet = '';
      this.betAmount = Math.min(10, this.userBalance);
      this.betConfirmed = false;
      this.roundResult = '';
      this.diceResult = 0;
      this.isRolling = false;
      this.isBetting = true;
      this.betTime = this.betTimeLimit;
      
      const betTimer = setInterval(() => {
        this.betTime--;
        
        if (this.betTime <= 0) {
          clearInterval(betTimer);
          this.endBetting();
        }
      }, 1000);
    },
    
    endBetting() {
      this.isBetting = false;
      
      if (!this.betConfirmed && this.canBet) {
        this.selectedBet = Math.random() > 0.5 ? 'big' : 'small';
        this.betAmount = 10;
        this.betConfirmed = true;
      }
      
      if (this.betConfirmed) {
        this.isRolling = true;
        
        setTimeout(() => {
          this.rollDice();
        }, 2000);
      } else {
        this.prepareNextRound();
      }
    },
    
    rollDice() {
      // 添加骰子滚动动画的平滑过渡
      this.diceResult = 1;
      setTimeout(() => { this.diceResult = 3; }, 300);
      setTimeout(() => { this.diceResult = 5; }, 600);
      setTimeout(() => { 
        this.diceResult = Math.floor(Math.random() * 6) + 1;
        this.checkResult();
      }, 900);
    },
    
    checkResult() {
      const result = this.diceResult <= 3 ? 'small' : 'big';
      
      if (result === this.selectedBet) {
        this.roundResult = 'win';
        this.userBalance += this.betAmount;
        this.winCount++;
      } else {
        this.roundResult = 'lose';
        this.userBalance -= this.betAmount;
        this.loseCount++;
      }
      
      this.isRolling = false;
      this.prepareNextRound();
    },
    
    prepareNextRound() {
      if (this.currentRound >= this.totalRounds) {
        this.gameOver = true;
        return;
      }
      
      this.nextRoundIn = this.nextRoundDelay;
      const nextRoundTimer = setInterval(() => {
        this.nextRoundIn--;
        
        if (this.nextRoundIn <= 0) {
          clearInterval(nextRoundTimer);
          this.currentRound++;
          this.startRound();
        }
      }, 1000);
    },
    
    selectBet(type) {
      this.selectedBet = type;
    },
    
    confirmBet() {
      if (this.selectedBet && this.betAmount && this.betAmount <= this.userBalance) {
        this.betConfirmed = true;
      }
    },
    
    resetGame() {
      this.userBalance = this.initialBalance;
      this.winCount = 0;
      this.loseCount = 0;
      this.gameOver = false;
      this.startFirstRound();
    },
    
    updateOnlineUsers() {
      // 平滑过渡数字变化
      const target = Math.floor(Math.random() * 21) + 20;
      this.smoothNumberChange('onlineUsers', target, 800);
    },
    
    generateOtherPlayers() {
      const count = Math.floor(Math.random() * 11) + 40;
      this.otherPlayers = [];
      
      for (let i = 0; i < count; i++) {
        this.otherPlayers.push({
          bet: Math.random() > 0.5 ? 'big' : 'small',
          amount: Math.floor(Math.random() * 190) + 10
        });
      }
    },
    
    updateOtherPlayers() {
      if (this.isBetting) {
        // 限制同时更新的玩家数量，避免过多动画同时触发
        const updateCount = Math.min(5, this.otherPlayers.length);
        
        for (let i = 0; i < updateCount; i++) {
          const index = Math.floor(Math.random() * this.otherPlayers.length);
          this.otherPlayers[index] = {
            bet: Math.random() > 0.5 ? 'big' : 'small',
            amount: Math.floor(Math.random() * 190) + 10
          };
        }
        
        if (Math.random() > 0.8 && this.otherPlayers.length < 60) {
          this.otherPlayers.push({
            bet: Math.random() > 0.5 ? 'big' : 'small',
            amount: Math.floor(Math.random() * 190) + 10
          });
        }
        
        if (Math.random() > 0.8 && this.otherPlayers.length > 30) {
          this.otherPlayers.splice(Math.floor(Math.random() * this.otherPlayers.length), 1);
        }
      }
    },
    
    // 数字平滑变化动画
    smoothNumberChange(property, target, duration) {
      const start = this[property];
      const increment = target - start;
      const startTime = Date.now();
      
      const updateNumber = () => {
        const currentTime = Date.now();
        const timeElapsed = currentTime - startTime;
        const progress = Math.min(timeElapsed / duration, 1);
        
        // 使用缓动函数使变化更自然
        const easeProgress = progress < 0.5 
          ? 4 * progress * progress * progress 
          : 1 - Math.pow(-2 * progress + 2, 3) / 2;
          
        this[property] = Math.floor(start + increment * easeProgress);
        
        if (progress < 1) {
          requestAnimationFrame(updateNumber);
        } else {
          this[property] = target;
        }
      };
      
      requestAnimationFrame(updateNumber);
    }
  }
};
</script>

<style scoped>
/* 基础样式与背景图 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

.casino-app {
  color: #f8fafc;
  min-height: 100vh;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.background-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/img/高楼.jpg'), 
                    radial-gradient(circle at center, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0.8) 70%);
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: -1;
  filter: brightness(0.9);
}

/* 顶部导航 */
.main-header {
  background-color: rgba(30, 41, 59, 0.7);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  flex-wrap: wrap;
  backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
}

.logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  width: 100%;
  justify-content: center;
}

.logo i {
  color: #f59e0b;
  font-size: 2rem;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.logo h1 {
  font-size: 1.8rem;
  background: linear-gradient(90deg, #f59e0b, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

.game-status {
  display: flex;
  gap: 2rem;
  margin: 0 auto;
  align-items: center;
  background-color: rgba(245, 158, 11, 0.1);
  padding: 0.75rem 2rem;
  border-radius: 0.75rem;
  border: 2px solid #f59e0b;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

.game-status .stat-item {
  font-size: 1.2rem;
  font-weight: bold;
}

.left-stats, .right-stats {
  display: flex;
  gap: 2rem;
  min-width: 200px;
}

.right-stats .placeholder {
  visibility: hidden;
}

.user-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #e2e8f0;
}

.stat-item i {
  color: #f59e0b;
}

.stat-item strong {
  color: #f8fafc;
  transition: all 0.3s ease-out; /* 添加数字变化过渡 */
}

/* 动画优化：使用transform替代top/left等属性 */
.timer.warning {
  animation: pulse 1s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.timer.warning strong {
  color: #ef4444;
  font-size: 1.3em;
}

.timer.warning i {
  color: #ef4444;
}

/* 主要内容区 - 三栏布局 */
.main-content {
  display: flex;
  gap: 1.5rem;
  padding: 1.5rem;
  flex: 1;
  max-width: 1800px;
  margin: 0 auto;
  width: 100%;
}

/* 左右玩家列 */
.players-column {
  flex: 0 0 400px;
  background-color: rgba(30, 41, 59, 0.7);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(245, 158, 11, 0.2);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 160px);
  overflow: hidden;
}

.small-column {
  border-left: 3px solid #10b981;
}

.big-column {
  border-right: 3px solid #ef4444;
}

.players-column .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.players-column h2 {
  font-size: 1.3rem;
  margin: 0;
}

.small-column h2 {
  color: #10b981;
}

.big-column h2 {
  color: #ef4444;
}

.players-column .section-header p {
  color: #94a3b8;
  font-size: 0.9rem;
}

/* 头像网格 */
.avatar-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  overflow-y: auto;
  padding-right: 0.5rem;
  margin-bottom: 1rem;
  flex: 1;
}

.avatar-grid::-webkit-scrollbar {
  width: 6px;
}

.avatar-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.avatar-grid::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.5);
  border-radius: 10px;
}

/* 优化头像动画：使用transform和will-change */
.avatar-item {
  width: 70px;
  height: 70px;
  position: relative;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform; /* 提示浏览器准备动画 */
}

.avatar-item:hover {
  transform: scale(1.15) translateY(-5px);
}

.avatar-item img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}

.avatar-item:hover img {
  box-shadow: 0 8px 12px -1px rgba(0, 0, 0, 0.5);
}

.avatar-item.current-player img {
  border-color: #3b82f6;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
  animation: glow 2s infinite alternate;
}

.bet-indicator {
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: bold;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.avatar-item:hover .bet-indicator {
  transform: scale(1.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.bet-indicator.small {
  background-color: #10b981;
}

.bet-indicator.big {
  background-color: #ef4444;
}

.more-players {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(100, 116, 139, 0.5);
  border: 2px dashed #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease;
}

.more-players:hover {
  transform: scale(1.1);
  background-color: rgba(100, 116, 139, 0.7);
}

/* 玩家列底部的统计卡片 */
.players-column .stat-card {
  background-color: rgba(15, 23, 42, 0.5);
  border-radius: 0.75rem;
  padding: 0.8rem;
  margin-top: auto;
}

.stat-card .stat-value {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.stat-card .percentage {
  font-weight: bold;
  font-size: 1.1rem;
}

.small-stat .percentage {
  color: #10b981;
}

.big-stat .percentage {
  color: #ef4444;
}

.progress-bar {
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

/* 进度条动画优化 */
.progress-fill {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* 更平滑的缓动函数 */
}

.small-stat .progress-fill {
  background-color: #10b981;
}

.big-stat .progress-fill {
  background-color: #ef4444;
}

.total-chips {
  color: #f59e0b;
  font-size: 0.9rem;
  text-align: right;
}

/* 中间主游戏区 */
.game-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 押注区域 */
.bet-section {
  background-color: rgba(30, 41, 59, 0.7);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.bet-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: #f59e0b;
  font-size: 1.8rem;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.bet-buttons {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-bottom: 2rem;
}

/* 押注按钮动画优化 */
.bet-btn {
  flex: 1;
  max-width: 300px;
  padding: 2.5rem 1rem;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
              box-shadow 0.3s ease,
              filter 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 1.8rem;
  font-weight: bold;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
}

/* 使用transform替代left动画 */
.bet-btn::after {
  content: '';
  position: absolute;
  top: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: transform 0.6s ease;
}

.bet-btn:hover::after {
  transform: translateX(100%);
}

.bet-btn i {
  font-size: 3.5rem;
  transition: transform 0.3s ease;
}

.bet-btn:hover i {
  transform: scale(1.15) rotate(5deg);
}

.bet-small {
  background-color: rgba(16, 185, 129, 0.8);
  color: white;
}

.bet-big {
  background-color: rgba(239, 68, 68, 0.8);
  color: white;
}

.bet-btn.selected {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.35);
  filter: brightness(1.1);
}

.bet-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.bet-input-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.bet-input-area label {
  font-size: 1.2rem;
  color: #e2e8f0;
}

.bet-input-area input {
  width: 150px;
  padding: 0.75rem;
  border: 2px solid #f59e0b;
  border-radius: 0.5rem;
  background-color: rgba(15, 23, 42, 0.8);
  color: white;
  font-size: 1.1rem;
  text-align: center;
}

.confirm-bet-btn {
  padding: 0.75rem 2rem;
  background-color: #f59e0b;
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.confirm-bet-btn:hover {
  background-color: #d97706;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.4);
}

.confirm-bet-btn:disabled {
  background-color: #64748b;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 结果区域 */
.result-section {
  background-color: rgba(30, 41, 59, 0.7);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(245, 158, 11, 0.2);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.result-section h2 {
  color: #f59e0b;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.dice-animation {
  padding: 2rem;
  font-size: 3rem;
  color: #f59e0b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* 骰子旋转动画优化 */
.dice-animation i {
  animation: spin 0.8s linear infinite;
  transform-origin: center;
}

.dice-result {
  padding: 2rem;
}

/* 骰子结果动画优化 */
.result-value {
  font-size: 5rem;
  font-weight: bold;
  color: #f59e0b;
  margin: 1rem 0;
  text-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
  animation: pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

.result-message {
  font-size: 1.5rem;
  margin: 1rem 0;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.5s ease;
}

.result-message.win {
  background-color: rgba(16, 185, 129, 0.2);
  color: #10b981;
  animation: highlight 1.5s ease;
}

.result-message.lose {
  background-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.round-summary {
  font-size: 1.2rem;
  color: #e2e8f0;
  margin: 1rem 0;
}

.next-round {
  color: #94a3b8;
  margin-top: 1.5rem;
}

.play-again-btn {
  margin-top: 1rem;
  padding: 0.75rem 2rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.play-again-btn:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.4);
}

.game-over {
  padding: 2rem;
}

.final-result {
  margin-bottom: 2rem;
}

.final-result p {
  font-size: 1.2rem;
  margin: 0.8rem 0;
}

.final-result .win {
  color: #10b981;
}

.final-result .lose {
  color: #ef4444;
}

/* 页脚 */
.main-footer {
  background-color: rgba(30, 41, 59, 0.7);
  padding: 1.5rem;
  text-align: center;
  color: #94a3b8;
  margin-top: auto;
  backdrop-filter: blur(5px);
  border-top: 1px solid rgba(245, 158, 11, 0.3);
}

/* 优化的动画关键帧 */
@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse {
  from { transform: scale(1); opacity: 0.7; }
  to { transform: scale(1.05); opacity: 1; }
}

/* 更平滑的旋转动画 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 胜利高亮动画 */
@keyframes highlight {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* 头像发光动画 */
@keyframes glow {
  from { box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); }
  to { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); }
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .players-column {
    flex: 0 0 350px;
  }
}

@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
  }
  
  .players-column {
    flex: none;
    width: 100%;
    max-height: 300px;
  }
  
  .avatar-grid {
    max-height: 200px;
  }
}

@media (max-width: 768px) {
  .main-header {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  
  .left-stats, .right-stats, .game-status {
    width: 100%;
    justify-content: center;
    margin-bottom: 0.5rem;
  }
  
  .game-status {
    order: -1;
    margin-bottom: 1rem;
  }
  
  .bet-buttons {
    flex-direction: column;
  }
  
  .bet-btn {
    max-width: none;
  }
}
</style>
